<template>
  <v-card
    flat
    class="mt-5"
    v-loading="is_loading"
  >
    <v-form>
      <div class="px-3">
        <v-card-text class="pt-5">
          <v-row>
            <v-col
              cols="12"
              sm="8"
              md="6"
            >
              <!-- current password -->
              <v-text-field
                v-model="currentPassword"
                ref="current_password"
                :type="isCurrentPasswordVisible ? 'text' : 'password'"
                :append-icon="isCurrentPasswordVisible ? icons.mdiEyeOffOutline:icons.mdiEyeOutline"
                label="旧密码"
                :rules="[rules.required]"
                outlined
                dense
                persistent-hint
                @click:append="isCurrentPasswordVisible = !isCurrentPasswordVisible"
              ></v-text-field>

              <!-- new password -->
              <v-text-field
                v-model="newPassword"
                ref="new_password"
                :type="isNewPasswordVisible ? 'text' : 'password'"
                :append-icon="isNewPasswordVisible ? icons.mdiEyeOffOutline:icons.mdiEyeOutline"
                label="新密码"
                :rules="[rules.required, rules.min]"
                outlined
                dense
                hint="最短 8 个字符"
                persistent-hint
                @click:append="isNewPasswordVisible = !isNewPasswordVisible"
              ></v-text-field>

              <!-- confirm password -->
              <v-text-field
                v-model="confirmPassword"
                ref="confirm_password"
                :type="isCPasswordVisible ? 'text' : 'password'"
                :append-icon="isCPasswordVisible ? icons.mdiEyeOffOutline:icons.mdiEyeOutline"
                label="确认密码"
                :error-messages="password_match ? [] : ['密码不匹配']"
                outlined
                dense
                class="mt-3"
                @click:append="isCPasswordVisible = !isCPasswordVisible"
              ></v-text-field>
            </v-col>

            <!--
            <v-col
              cols="12"
              sm="4"
              md="6"
              class="d-none d-sm-flex justify-center position-relative"
            >
              <v-img
                contain
                max-width="170"
                src="@/assets/images/3d-characters/pose-m-1.png"
                class="security-character"
              ></v-img>
            </v-col>
            -->
          </v-row>
        </v-card-text>
      </div>

      <!-- divider -->
      <!-- <v-divider></v-divider> -->

      <div class="pa-3">
        <!-- 2FA is currently not suppported
        <v-card-title class="flex-nowrap">
          <v-icon class="text--primary me-3">
            {{ icons.mdiKeyOutline }}
          </v-icon>
          <span class="text-break">Two-factor authentication</span>
        </v-card-title>

        <v-card-text class="two-factor-auth text-center mx-auto">
          <v-avatar
            color="primary"
            class="primary mb-4"
            rounded
          >
            <v-icon
              size="25"
              color="white"
            >
              {{ icons.mdiLockOpenOutline }}
            </v-icon>
          </v-avatar>
          <p class="text-base text--primary font-weight-semibold">
            Two factor authentication is not enabled yet.
          </p>
          <p class="text-sm text--primary">
            Two-factor authentication adds an additional layer of
            security to your account by requiring more than just a
            password to log in. Learn more.
          </p>
        </v-card-text>
      -->

        <!-- action buttons -->
        <v-card-text>
          <v-btn
            color="primary"
            class="me-3"
            @click="change_password"
          >
          保存更改
          </v-btn>
        </v-card-text>
      </div>
    </v-form>
  </v-card>
</template>

<script>
// eslint-disable-next-line object-curly-newline
import { mdiKeyOutline, mdiLockOpenOutline, mdiEyeOffOutline, mdiEyeOutline } from '@mdi/js'
import { ref } from '@vue/composition-api'

export default {
  setup() {
    const isCurrentPasswordVisible = ref(false)
    const isNewPasswordVisible = ref(false)
    const isCPasswordVisible = ref(false)
    const currentPassword = ref('')
    const newPassword = ref('')
    const confirmPassword = ref('')

    return {
      isCurrentPasswordVisible,
      isNewPasswordVisible,
      currentPassword,
      isCPasswordVisible,
      newPassword,
      confirmPassword,
      icons: {
        mdiKeyOutline,
        mdiLockOpenOutline,
        mdiEyeOffOutline,
        mdiEyeOutline,
      },
    }
  },
  data() {
    return {
      rules: {
        required: value => !!value || '必填',
        min: v => v.length >= 8 || '最短 8 个字符'
      },
      is_loading: false
    }
  },
  computed: {
    password_match() {
      return !(this.confirmPassword.length && (this.confirmPassword != this.newPassword))
    },
  },
  methods: {
    change_password() {
      console.log(this.$refs)
      if (!(this.$refs.current_password.validate()
        && this.$refs.new_password.validate()
        && this.password_match)) {
        console.log("bad input")
        return
      }
      this.is_loading = true
      this.$api.account.change_password(this.currentPassword, this.newPassword)
        .then(data => {
          console.log(data)
          this.$message("修改成功")
        })
        .catch(error => this.$alert(
          error.api_detail || error,
          "API error"
        ))
        .finally(() => this.is_loading = false)
    }
  }
}
</script>

<style lang="scss" scoped>
.two-factor-auth {
  max-width: 25rem;
}
.security-character {
  position: absolute;
  bottom: -0.5rem;
}
</style>
